<template>
  <div>
    <el-container>
      <el-aside width="200px" class="aside">

        <el-tree :data="data" :props="defaultProps" node-key="id" :default-expanded-keys="['1024982867475820033','1024984540818568481']" :current-node-key="activeID" :highlight-current="true" style="font-size:50px" icon-class="el-icon-circle-plus-outline" @node-click="handleNodeClick" />
      </el-aside>
      <el-main style="padding:0">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>机构信息</span>
          </div>
          <el-form class="demo-form-inline" :inline="true" :model="form">
            <div>
              <el-form-item label="机构编号" style="width:35%">
                <el-input
                  v-model="form.id"
                  style="width:200px"
                  :disabled="true"
                />
              </el-form-item>
              <el-form-item label="机构名称" style="width:30%">
                <el-input v-model="form.name" style="width:150px" :disabled="true" />
              </el-form-item>
              <el-form-item label="机构类型" style="width:30%">
                <el-select v-model="form.type" placeholder="机构类型" style="width:150px" :disabled="true">
                  <el-option label="一级转运" :value="1" />
                  <el-option label="二级转运" :value="2" />
                  <el-option label="网点" :value="3" />
                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="机构地址" style="width:35%">
                <el-select v-model="form.provinceId" placeholder="省" style="width:200px" :disabled="determine" @change="getCity">
                  <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select v-model="form.cityId" placeholder="市" style="width:200px;margin-right:40px" :disabled="determine" @change="getCounty">
                  <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select v-model="form.countyId" placeholder="区" style="width:200px" :disabled="determine">
                  <el-option v-for="item in countyList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="详细地址" style="width:35%">
                <el-input v-model="form.address" style="width:200px" :disabled="determine" />
              </el-form-item>
              <el-form-item label="经度" style="width:30%">
                <el-input v-model="form.longitude" style="width:200px" :disabled="true" />
              </el-form-item>
              <el-form-item label="纬度" style="width:30%">
                <el-input v-model="form.latitude" style="width:200px" :disabled="true" />
              </el-form-item>
            </div>
            <div>
              <el-form-item label="机构负责人" style="width:35%">
                <el-input v-model="form.managerName" style="width:200px" :disabled="determine" />
              </el-form-item>
              <el-form-item label="机构电话" style="width:35%">
                <el-input v-model="form.phone" style="width:200px" :disabled="determine" />
              </el-form-item>
            </div>
            <el-button v-if="determine" style="background-color:#e15536;color:white;margin-left:400px" @click="determine=false">编辑</el-button>
            <el-button v-else-if="!determine" style="background-color:#e15536;color:white;margin-left:400px" @click="editManage">保存</el-button>
          </el-form>
        </el-card>
        <el-card class="box-card" style="margin-top:10px">
          <div slot="header" class="clearfix">
            <span>员工信息</span>
          </div>
          <el-table
            :data="employeeList"
            stripe
            border
            style="width: 100%"
            :header-cell-style="{ background: '#f8faff' }"
          >
            <el-table-column
              :index="indexMethod"
              label="序号"
              width="180"
              type="index"
            />
            <el-table-column
              prop="userId"
              label="员工编号"
              width="180"
            />
            <el-table-column
              prop="name"
              label="员工姓名"
            />
            <el-table-column
              prop="mobile"
              label="手机号"
            />
            <el-table-column
              prop="agency.name"
              label="所属机构"
            />
            <el-table-column
              prop="account"
              label="系统账户"
            />
            <el-table-column
              prop="stationName"
              label="系统角色"
            />
            <el-table-column
              prop="status"
              label="账号状态"
            >
              <template v-slot="{row}">
                <span v-if="row.status===1"><span class="el-icon-star-on" style="color:green" />正常</span>
                <span v-else><span class="el-icon-star-off" style="color:red" />禁用</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="1"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="employeeList.length"
            style="text-align: center"
          />
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { getManageTree, getManageDetail, getAgencyDetail } from '@/api/manager'
import { getArea } from '@/api/user'
export default {
  name: 'OrganiManagement',
  data() {
    return {
      activeID: '1024985257948084801',
      pageParams: {
        page: 1,
        pageSize: 5,
        agencyId: ''
      },
      form: {
        address: '',
        cityId: '',
        countyId: '',
        extra: 'mollit deserunt non exercitation',
        id: '',
        latitude: '',
        longitude: '',
        managerName: '',
        name: '',
        parent: {
          id: '',
          name: '',
          subAgencies: [],
          type: ''
        },
        parentId: '',
        phone: '',
        provinceId: '',
        status: '',
        type: ''
      },
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      employeeList: [],
      provinceList: [],
      cityList: [],
      countyList: [],
      determine: true
    }
  },
  async created() {
    // 树状图
    const res = await getManageTree()
    const data = JSON.parse(res)
    this.data = data

    // 获取机构信息
    const result = await getManageDetail(this.activeID)
    this.form = result
    this.form.provinceId = this.form.province.id
    this.form.cityId = this.form.city.id
    this.form.countyId = this.form.county.id
    // 根据省获取城市列表
    const result3 = await getArea(this.form.provinceId)
    this.cityList = result3

    // 根据城市获取区域列表
    const result4 = await getArea(this.form.cityId)
    this.countyList = result4

    // 获取员工列表
    this.pageParams.agencyId = this.activeID
    const res1 = await getAgencyDetail(this.pageParams)
    this.employeeList = res1.items

    const result2 = await getArea()
    this.provinceList = result2
  },
  methods: {
    // 获取序号
    indexMethod(index) {
      return index + this.pageParams.pageSize * (this.pageParams.page - 1) + 1
    },
    async handleNodeClick(e) {
      // 获取机构详情
      const res = await getManageDetail(e.id)
      this.form = res
      this.form.provinceId = this.form.province.id
      this.form.cityId = this.form.city.id
      this.form.countyId = this.form.county.id

      // 查询员工信息
      this.pageParams.agencyId = e.id
      const result = await getAgencyDetail(this.pageParams)
      this.employeeList = result.items

      // 获取省份信息
      const result2 = await getArea()
      this.provinceList = result2
      // 根据省获取城市列表
      const result3 = await getArea(this.form.provinceId)
      this.cityList = result3

      // 根据城市获取区域列表
      const result4 = await getArea(this.form.cityId)
      this.countyList = result4
    },
    async getCity() {
      this.cityList = []
      this.countyList = []
      this.form.cityId = ''
      this.form.countyId = ''
      const result = await getArea(this.form.provinceId)
      this.cityList = result
    },
    async getCounty() {
      this.countyList = []
      this.form.countyId = ''
      const result = await getArea(this.form.cityId)
      this.countyList = result
    },
    // 编辑机构
    async editManage() {
      delete this.form.city
      delete this.form.county
      delete this.form.province
      this.$message.success('保存成功')
      this.determine = true
    }

  }
}
</script>
<style scoped>
.aside{
  margin: 0 20px;
  background-color: #fff;
  height: 803px;
}
::v-deep .el-card__header{
  background-color: #fafafa;
}
.box-card{
  height: 400px;
}
.clearfix{
font-size:20px;
font-weight:700
}

::v-deep .el-tree-node__label{
  font-size: 16px;
}
::v-deep .el-tree-node__content{
  margin-top: 20px;
}
</style>
